<!--
 * @Descripttion: 
 * @Author: voanit
 * @Date: 2022-06-29 10:07:57
 * @LastEditors: voanit
 * @LastEditTime: 2022-06-29 10:28:31
-->
<template>
  <div>
    御剑乘风来,除魔天地间!===vue3===demo
    {{ obj.x }}=={{ obj.y }}
  </div>
</template>
<script>
/* 
目的：鼠标移动获取坐标，并展示坐标
步骤：
  1-定义一个响应式对象 保存坐标并展示
  2-绑定事件===鼠标移动事件
  3-获取移动事件的事件对象===获取坐标
  4-需要将获取的坐标赋值给响应式对象
*/
import { reactive, onMounted, toRefs } from 'vue'


export default {
  name: '',
  setup () {
    // 1-定义一个响应式对象 保存坐标并展示
    const obj = reactive({
      x: 0,
      y: 0
    })
    // const newObj = toRefs(obj)
    // 2-绑定事件===鼠标移动事件
    onMounted(() => {
      window.addEventListener('mousemove', (e) => {
        // console.log(newObj, 88);
        // 3 - 获取移动事件的事件对象 === 获取坐标
        // console.log(e.pageX, 111);
        // 4-需要将获取的坐标赋值给响应式对象
        obj.x = e.pageX
        obj.y = e.pageY
        // newObj.x.value = e.pageX
        // newObj.y.value = e.pageY
      })
    })

    // return { obj, ...newObj }
    return { obj }

  }
}
</script>
<style lang='less'  scoped>
</style>